<template lang="pug">
  .bill-table
    Modal(
      width="820"
      v-model="isShowApplyModal"
      title="是否确认申请发放"
      class-name="vertical-center-modal"
    )
      .search-form.pt-20
        p.font-16.mb-30.text-center 是否确认申请发放给: {{names}}
        Form.ivu-row.has-rules-item2(ref="formData" :model="formData" :rules="setRules" :label-width="100")
          FormItem.form-item.ivu-col.pr-20(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'input'")
              Input(v-if="item.fn" v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled" :type="item.model == 'amt' ? 'number' : 'text'" @on-blur="(event, type) => listenCall(item.fn, item.model, formData[item.model])")
              Input(v-else v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled" :type="item.model == 'amt' ? 'number' : 'text'")
            template(v-if="item.type === 'select'")
              Select(v-if="item.fn" v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled" @on-change="(event, type) => listenCall(item.fn, item.model, event)")
                Option(v-for="(c_item, c_index) in arrListDown[item.options]" :value="c_item.value" :key="c_index" ) {{ c_item.label }}
              Select(v-else v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled")
                Option(v-for="(c_item, c_index) in arrListDown[item.options]" :value="item.model == 'payType' ? c_item.label : c_item.value" :key="c_index" ) {{ c_item.label }}
            template(v-if="item.type === 'datePicker'")
              DatePicker.w-100(v-model="formData[item.model]" placeholder="请选择" type="month" format="yyyy-MM")
            template(v-if="item.type === 'radio'")
              RadioGroup(v-model="formData[item.model]")
                Radio.display-inline-block(v-for="(c_item, c_index) in arrListDown[item.options]" :value="c_item.value" :key="c_index") {{ c_item.label }}

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定
</template>

<script>
import { FinanceSPayableApi } from '@/api/FinanceSPayable.api.js'
import { EmployeesApi } from '@/api/Employees.api.js'
import { Common } from '@/utils/common.js'

export default {
  name: '',

  props: {
  },

  components: {
  },

  computed: {
    isWorkFlow () {
      const workFlow = (JSON.parse(localStorage.getItem('clientLoginInfo'))).data.workFlow == 'true' ? true : false
      return workFlow
    },

    setRules () {
      if (this.formData.auditType == 1) {
        console.log('垫款金额字段 隐藏')
        this.rules.advanceAmt = []
      } else if (this.formData.auditType == 2) {
        console.log('垫款金额字段 显示')
        this.rules.advanceAmt = [{ required: true, message: '请输入垫款金额', trigger: 'change' }, { validator: this.validateAmt, trigger: 'blur' }]
      }
      return this.rules
    }
  },

  data () {
    return {
      isList: null,
      parentRow: null,
      modalKey: null,
      isShowApplyModal: false,
      // applyUsersList: [],
      // transferData: [], // 待选员工列表
      // selectTransferData: [],
      // targetKeys: [], // 已选员工列表
      // selectTargetKeys: [],
      // selectArr: [],
      isCanSubmit: true,
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 100, // 当前页面展示条数
        totalPages: 0
      },
      formData: {
        auditType: null,
        advanceAmt: null,
        explain: null,
      },
      formItem: [
        { type: 'select', label: '审批方式：', placeholder: '请选择审批方式', prop: 'auditType', model: 'auditType', style: 'ivu-col-span-12', options: 'auditTypeOps', fn: 'auditTypeChange' },
        { type: 'input', label: '垫付金额：', placeholder: '请输入垫付金额', prop: 'advanceAmt', model: 'advanceAmt', style: 'ivu-col-span-12' },
        { type: 'input', label: '说明：', placeholder: '请输入说明', prop: 'explain', model: 'explain', style: 'ivu-col-span-12' },
      ],
      rules: {
        auditType: [
          { required: true, message: '请选择审批方式', trigger: 'change' }
        ],
        advanceAmt: [
          { required: true, message: '请输入垫付金额', trigger: 'change' }
        ],
      },
      arrListDown: {
        BillMergeProject: [],
        auditTypeOps: [{label: '常规请款审批', value: '1'}, {label: '垫付请款审批', value: '2'}]
      },
      names: null,
      dataArr: null
    }
  },

  watch: {
  },

  mounted () {
    this.getEnum()
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
    },

    // 数据字典
    getEnum () {
      let typeName = 'BillMergeProject'
      Common.getSelectValueList(typeName, this.arrListDown)
    },

    ok () {
    },

    cancel () {
      this.isShowApplyModal = false
    },

    show (row) {
      this.$refs.formData.resetFields()
      this.parentRow = row
      this.isShowApplyModal = true
      this.isCanSubmit = true
      this.transferData = []
      this.targetKeys = []
      this.employeeNameOrIdCardNo = ''
    },

    // 确定提交
    async handleSubmit () {
      var params = {
        IsList: false,
        SalaryID: this.$route.query.salaryID,
        CompanyID: this.$route.query.companyID,
        SalaryMonth: this.$route.query.salaryMonth,
        Datas: this.dataArr,
        WFContent: {
          AuditType: this.formData.auditType,
          AdvanceAmt: this.formData.advanceAmt,
          Explain: this.formData.explain,
        }
      }
      console.log('确定提交 params: ', params)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          FinanceSPayableApi.postApplyUsers(params).then(res => {
            if (res.status === 200 && res.data.success) {
              // window.open(baseUrl + res.data.data, '_blank')
              this.$Message.success(res.data.message)
              this.isShowApplyModal = false
              this.$emit('query')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
              this.isCanSubmit = true
            }
          })
        }
      })
    },

    // 审批方式改变
    auditTypeChange (model, value) {
      console.log('审批方式改变 model: ', model, ', value: ', value)
      if (value == '1') {
        console.log('垫款金额字段 隐藏')
        this.formItem.map(item => {
          if (item.model == 'advanceAmt') {
            item.style = 'ivu-col-span-12 display-none'
          }
        })
      } else if (value == '2') {
        console.log('垫款金额字段 显示')
        this.formItem.map(item => {
          if (item.model == 'advanceAmt') {
            item.style = 'ivu-col-span-12 display-block'
          }
        })
      }
      this.formData.advanceAmt = null
    },
  },
}
</script>

<style lang="less" scope>
.ivu-transfer-list-header{
  height: 42px;
}
.custom-transfer{
  padding-top: 42px;
  height: 250px;
  .ivu-transfer-list-body{
    overflow-y: scroll;
    .ivu-checkbox-wrapper{
      padding: 3px 16px;
      margin: 0;
      clear: both;
      line-height: 25px;
      .ivu-checkbox{
        margin-right: 5px;
      }
    }
  }
  .ivu-transfer-operation{
    .ivu-btn {
      width: 28px;
      height: 25px;
      line-height: 23px;
      text-align: center;
      font-size: 14px;
      padding: 0;
      span{
        display: block;
      }
    }
  }
  .ivu-transfer-list-content-item{
    padding-top: 3px;
    padding-bottom: 3px;
  }
}
.action-icon{
  width: 28px;
  height: 25px;
  line-height: 23px;
  color: #c5c8ce;
  background-color: #f7f7f7;
  border: solid 1px #dcdee2;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
  transition: all .3s;
  cursor: pointer;
  padding: 0;
  &:hover{
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
  }
}
</style>
